<template>
  <div :class="{ 'reset-naive-button': props.noStyle }" class="flex items-center" @click="handleClick">
    <n-button :render-icon="GetIcon(iconName!)" v-bind="$attrs" :style="{ fontSize: props.fontSize }">
      <slot />
    </n-button>
  </div>
</template>

<script setup lang="ts">
import { ButtonProps } from "naive-ui";
interface Props extends /* @vue-ignore */ ButtonProps {
  iconName?: IconType;
  fontSize?: string;
  noStyle?: boolean;
}
const props = defineProps<Props>();
const GetIcon = getIcon
const emit = defineEmits<{
  (e: "click"): void;
}>();
const handleClick = () => {
  emit("click");
};
</script>

<style>
.reset-naive-button .n-button {
  --n-box-shadow-focus: none !important;
  --n-box-shadow-focus-error: none !important;
  --n-box-shadow-hover: none !important;
  --n-box-shadow-pressed: none !important;
  --n-border: none !important;
  --n-border-hover: none !important;
  --n-border-active: none !important;
  --n-border-pressed: none !important;
  --n-border-focus: none !important;
  --n-border-disabled: none !important;
  --n-ripple-color: transparent !important;
  background-color: transparent !important;
}
</style>
